<template>
    <div class='login'>
        <el-dialog :visible.sync="loginDialogVisible" width="20%" :before-close="handleClose" class="login-dialog">
            <div class="login-wrapper">
                <!-- <img style="width:100%" src="../../assets/logo.png" alt="" class="login-logo"> -->
                <div class="login-logo"><h1>Tonakyo</h1><h2>Music</h2></div>
                <div class="login-way">
                    <span @click="onAccountLogin">账号登录</span>
                    <span @click="onEmailLogin">邮箱登录</span>
                    <span @click="onClickQrCoodLogin">二维码登录</span>
                </div>
                <!-- 账号登录 -->
                <el-form  ref="loginFormRef" :model="loginForm" :rules="loginFormRules" v-if="loginWay.accountLogin">
                    <el-form-item prop="phone">
                        <el-input v-model="loginForm.phone" placeholder="请输入网易云帐号登录">
                            <i slot="prefix" class="iconfont icon-phone"></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="pwd">
                        <el-input v-model="loginForm.pwd" placeholder="请输入密码" show-password>
                            <i slot="prefix" class="iconfont icon-pwd"></i>
                        </el-input>
                    </el-form-item>
                </el-form>
                <!-- 邮箱登录 -->
                <el-form  ref="loginFormRef" :model="loginForm" :rules="loginFormRules" v-if="loginWay.emailLogin">
                    暂未开发
                </el-form>
                <!-- 二维码登录 -->
                <div class="QR-login" v-if="loginWay.qrLogin">
                    <img src="../../assets/logo.png" alt="">
                    <span>暂未开发</span>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" v-if="loginWay.accountLogin">登录</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
    components: {},
    data () {
        // 这里存放数据
        return {
            loginForm: {
                phone: '',
                pwd: ''
            },
            loginFormRules: {
                phone: [{ required: true, message: '请输入网易帐号', trigger: 'blur' }],
                pwd: [{ required: true, message: '请输入网易密码', trigger: 'blur' }]
            },
            loginWay: {
                accountLogin: true,
                emailLogin: false,
                qrLogin: false
            }
        }
    },
    // 监听属性 类似于data概念
    computed: {
        ...mapGetters(['loginDialogVisible'])
    },
    // 方法集合
    methods: {
        ...mapMutations(['setLogin', 'setUserInfo', 'setLoginDialog']),
        handleClose () {
            this.setLoginDialog(false)
        },
        // 点击账号登录
        onAccountLogin () {
            this.loginWay.accountLogin = true
            this.loginWay.emailLogin = false
            this.loginWay.qrLogin = false
        },
        // 点击邮箱登录
        onEmailLogin () {
            console.log(222)
            this.loginWay.accountLogin = false
            this.loginWay.emailLogin = true
            this.loginWay.qrLogin = false
        },
        // 账号密码登录
        submitForm () {
            this.$refs.loginFormRef.validate(async (valid) => {
                if (valid) {
                    const { data: res } = await this.$http.login(this.loginForm)

                    if (res.code !== 200) {
                        // this.$msg.error(res.msg)
                        this.$msg.error('账号密码错误')
                    } else {
                        this.getUserInfo(res.profile.userId)
                        window.sessionStorage.setItem('token', res.token)
                        window.sessionStorage.setItem('cookie', res.cookie)
                        window.sessionStorage.setItem('isLogin', true)
                        this.setLoginDialog(false)
                    }
                }
            })
        },
        // 二维码开发过程中遇到问题暂不开发
        // 点击二维码登录
        onClickQrCoodLogin () {
            this.loginWay.accountLogin = false
            this.loginWay.emailLogin = false
            this.loginWay.qrLogin = true
            console.log('点击了二维码登录')
            // this.QrCodeLogin()
        },
        // 二维码登录
        async QrCodeLogin () {
            // 获取二维码key
            const { data: res } = await this.$http.getQrCodeKey()
            if (res.code !== 200) {
                this.$msg.error(res.msg)
            } else {
               console.log(res)
            }
        },
        async getUserInfo (uid) {
            const { data: res } = await this.$http.getUserInfo({ uid: uid })

            if (res.code !== 200) {
                this.$msg.error(res.msg)
            } else {
                window.sessionStorage.setItem('userInfo', JSON.stringify(res.profile))
                this.setLogin(true)
                this.setUserInfo(res.profile)
            }
        }
    }
}
</script>
<style scoped lang="less">
.login-logo {
    margin-bottom: 30px;
    text-align: center;
    h1{
        font-size: 32px;
        margin-bottom: 20px;
    }
}
.login-way{
        width: 100%;
        height: 24px;
        line-height: 24px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-around;
        span{
            cursor: pointer;
        }
    }
.login-dialog {

    /deep/.el-dialog__body {
        padding: 30px 20px 0;
    }

    .dialog-footer {
        position: relative;
        z-index: 2;
        display: block;
        width: 100%;
        margin-bottom: 100px;

        .el-button {
            width: 100%;
        }
    }

    /deep/.el-dialog__footer {
        position: relative;

        &:after {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            content: "";
            width: 100%;
            height: 100%;
            opacity: .3;
            background-size: contain;
        }
    }
}
.QR-login{
    width: 100%;
    img{
        width: 100%;
    }
}
</style>
